<template>
    <div style="background: #eff3f5;padding-top: 59px;">
        <header>
            <img src="../assets/images/rule.png" alt="" class="headpic">
        </header>
        <div class="main clearfix">
            <el-row>
                <!-- 菜单 -->
                <el-col :span="6">
                    <div class="tabBox">
                        <p v-for="(item,index) in listData" :key="index" :class="['menutab',active == index ? 'isactive':'']" @click="changeFun(index,item.id)">{{item.name}}</p>
                    </div>
                </el-col>
                <!-- 内容 -->
                <el-col :span="18">
                    <div class="panel" style="margin: 0 0px 0px 24px;">
                        <div class="panel-main">
                            <h1 class="panel__title">{{nowtit}}</h1>
                            <div class="panel__content" v-for="(item,index) in details" :key="index">
                                <h3 class="rule__title">{{item.title}}</h3>
                                <p class="rule__text" v-html="item.content"></p>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>

    import '../assets/css/help.css'
    export default {
        data(){
            return{
                active: 0,
                listData: [],
                articletitle: '',  //文章标题
                details: [],
                nowtit: '',  //当前标题
            }
        },
        methods: {
            // 切换菜单选项
            handselect(){
                this.routerAlive = false;
                this.$nextTick(()=>{
                    this.routerAlive = true;
                });
            },
            init(){
                var _this = this;

                //tab列表
                this.$httpGet('/api/index/Article/getArticleType',{'type': 2}).then(response => {

                    if(response.code == 200){

                        _this.listData = response.msg;
                        _this.nowtit = _this.listData[0].name;
                        _this.changeFun(0,_this.listData[0].id);
                        
                    }

                });

            },
            //切换tab
            changeFun(ind,cid){
                this.active = ind;

                var _this = this;

                _this.nowtit = _this.listData[ind].name;

                //tab列表
                this.$httpGet('/api/index/Article/getArticleInfoById',{'cid':cid}).then(response => {

                    if(response.code == 200){

                        _this.details = response.msg;
                        
                    }

                });
            },
        },
        mounted(){
            this.init();
        },
    }
</script>
<style scoped>
    header{
        background: -webkit-linear-gradient(left, #ffb059 , #ff9a4a); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #ffb059, #ff9a4a); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #ffb059, #ff9a4a); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #ffb059 , #ff9a4a); /* 标准的语法 */
    }
</style>


